import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/**
 * 设备状态指示器组件
 * 显示设备在线/离线状态，带动画效果
 */
Item {
    id: root
    
    // ========================================
    // 公开属性
    // ========================================
    property string status: "offline"  // 状态: online, offline, error, connecting
    property int size: 12              // 指示器大小
    property bool showText: true       // 是否显示文字
    property bool showAnimation: true  // 是否显示动画
    
    // 固定大小，避免绑定循环
    width: showText ? (size + (size * 4) + 8) : size
    height: size
    
    // ========================================
    // 主布局
    // ========================================
    RowLayout {
        anchors.fill: parent
        spacing: 8
        
        // 状态指示器（圆点）
        Rectangle {
            id: statusIndicator
            Layout.preferredWidth: root.size
            Layout.preferredHeight: root.size
            radius: root.size / 2
            color: getStatusColor()
            
            // 呼吸动画（在线状态）
            SequentialAnimation on opacity {
                running: root.showAnimation && root.status === "online"
                loops: Animation.Infinite
                NumberAnimation { from: 1.0; to: 0.3; duration: 1000; easing.type: Easing.InOutQuad }
                NumberAnimation { from: 0.3; to: 1.0; duration: 1000; easing.type: Easing.InOutQuad }
            }
            
            // 脉冲外圈（在线状态）
            Rectangle {
                visible: root.status === "online" && root.showAnimation
                anchors.centerIn: parent
                width: parent.width + 4
                height: parent.height + 4
                radius: (parent.width + 4) / 2
                color: "transparent"
                border.color: getStatusColor()
                border.width: 2
                opacity: 0
                
                SequentialAnimation on opacity {
                    running: parent.visible
                    loops: Animation.Infinite
                    NumberAnimation { from: 0; to: 0.6; duration: 800 }
                    NumberAnimation { from: 0.6; to: 0; duration: 800 }
                }
                
                SequentialAnimation on scale {
                    running: parent.visible
                    loops: Animation.Infinite
                    NumberAnimation { from: 1.0; to: 1.3; duration: 800 }
                    NumberAnimation { from: 1.3; to: 1.0; duration: 800 }
                }
            }
            
            // 旋转动画（连接中状态）
            RotationAnimation on rotation {
                running: root.status === "connecting"
                loops: Animation.Infinite
                from: 0
                to: 360
                duration: 1500
            }
            
            // 连接中的装饰环
            Rectangle {
                visible: root.status === "connecting"
                anchors.centerIn: parent
                width: parent.width + 6
                height: parent.height + 6
                radius: (parent.width + 6) / 2
                color: "transparent"
                border.color: getStatusColor()
                border.width: 2
                opacity: 0.5
            }
        }
        
        // 状态文字
        Text {
            id: statusText
            visible: root.showText
            text: getStatusText()
            font.pixelSize: Math.max(10, root.size - 2)
            color: getStatusColor()
            font.bold: root.status === "online"
            Layout.alignment: Qt.AlignVCenter
        }
    }
    
    // ========================================
    // JavaScript 辅助函数
    // ========================================
    
    // 获取状态颜色
    function getStatusColor() {
        switch(root.status) {
            case "online":
                return "#10b981"  // 绿色 - 在线
            case "offline":
                return "#9ca3af"  // 灰色 - 离线
            case "error":
                return "#ef4444"  // 红色 - 错误
            case "connecting":
                return "#3b82f6"  // 蓝色 - 连接中
            default:
                return "#9ca3af"  // 默认灰色
        }
    }
    
    // 获取状态文字
    function getStatusText() {
        switch(root.status) {
            case "online":
                return "在线"
            case "offline":
                return "离线"
            case "error":
                return "错误"
            case "connecting":
                return "连接中"
            default:
                return "未知"
        }
    }
    
    // ========================================
    // 便捷方法
    // ========================================
    
    // 设置在线状态
    function setOnline() {
        status = "online"
    }
    
    // 设置离线状态
    function setOffline() {
        status = "offline"
    }
    
    // 设置错误状态
    function setError() {
        status = "error"
    }
    
    // 设置连接中状态
    function setConnecting() {
        status = "connecting"
    }
}

